<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>客户端管理</title>
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <h1>客户端管理</h1>
    <h2>已连接的客户端</h2>
    <ul id="client-list"></ul>
    <h2>发送命令</h2>
    <form id="command-form">
        <label for="client-select">选择客户端:</label>
        <select id="client-select"></select><br>
        <label for="command-input">命令:</label>
        <input type="text" id="command-input"><br>
        <button type="submit">发送</button>
    </form>
    <h2>命令输出</h2>
    <pre id="command-output"></pre>

    <h2>下载文件</h2>
    <form id="download-form">
        <label for="download-client-select">选择客户端:</label>
        <select id="download-client-select"></select><br>
        <label for="filepath-input">文件路径:</label>
        <input type="text" id="filepath-input"><br>
        <button type="submit">下载</button>
    </form>

    <h2>上传文件到客户端</h2>
    <form id="upload-form">
        <label for="upload-client-select">选择客户端:</label>
        <select id="upload-client-select"></select><br>
        <label for="file-input">选择文件:</label>
        <input type="file" id="file-input"><br>
        <button type="submit">上传</button>
    </form>

    <script>
        async function uploadFile(event) {
            event.preventDefault();
            const clientId = document.getElementById('upload-client-select').value;
            const fileInput = document.getElementById('file-input');
            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);

            const response = await fetch(`/upload_file/${clientId}`, {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            if (response.ok) {
                alert('File uploaded successfully');
            } else {
                alert('Upload failed: ' + result.error);
            }
        }

        async function fetchClients() {
            const response = await fetch('/list_clients');
            const clients = await response.json();
            const clientList = document.getElementById('client-list');
            const clientSelect = document.getElementById('client-select');
            const downloadClientSelect = document.getElementById('download-client-select');
            const uploadClientSelect = document.getElementById('upload-client-select');
            clientList.innerHTML = '';
            clientSelect.innerHTML = '';
            downloadClientSelect.innerHTML = '';
            uploadClientSelect.innerHTML = '';
            clients.forEach((client, index) => {
                const listItem = document.createElement('li');
                listItem.textContent = `${index + 1}. ${client}`;
                clientList.appendChild(listItem);

                const optionItem = document.createElement('option');
                optionItem.value = index;
                optionItem.textContent = client;
                clientSelect.appendChild(optionItem);
                downloadClientSelect.appendChild(optionItem.cloneNode(true));
                uploadClientSelect.appendChild(optionItem.cloneNode(true));
            });
        }

        async function sendCommand(event) {
            event.preventDefault();
            const clientId = document.getElementById('client-select').value;
            const command = document.getElementById('command-input').value;
            const response = await fetch(`/send_command/${clientId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ command })
            });
            const result = await response.json();
            document.getElementById('command-output').textContent = result.response;
        }

        async function downloadFile(event) {
            event.preventDefault();
            const clientId = document.getElementById('download-client-select').value;
            const filepath = document.getElementById('filepath-input').value;
            const response = await fetch(`/download_file/${clientId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ filepath })
            });

            if (response.ok) {
                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = filepath.split('/').pop();
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                alert('File downloaded successfully');
            } else {
                const result = await response.json();
                alert('Download failed: ' + result.error);
            }
        }

        document.getElementById('upload-form').addEventListener('submit', uploadFile);
        document.getElementById('command-form').addEventListener('submit', sendCommand);
        document.getElementById('download-form').addEventListener('submit', downloadFile);
        fetchClients();
    </script>
</body>
</html>
